import {defineComponent, h, resolveComponent, toRefs} from "vue";
import draggable from 'vuedraggable'
import '@/assets/css/elComponents.scss'
import {useStore} from "vuex";

const draggableItem = defineComponent({
    name: 'draggableItem',
    components: {draggable},
    props: {
        element: Object,
        activeId: [String, Number],
        form: Array, // 表单数据
        copy: Function, // 复制事件
        delete: Function, // 删除事件
        choose: Function // 选中事件
    },
    setup(props, {emit}) {
        // 引入Vuex
        const store = new useStore()
        let {element, activeId, form} = toRefs(props)

        // 注册事件
        function componentOperate(element, type) {
            if (type === 'copy') {
                props.copy(form.value, element)
            } else if (type === 'delete') {
                props.delete(form.value, element.field)
            }
        }

        function renderItem(element) {
            let cutomComponent = resolveComponent(element.type)
            let retData = [renderTools(element), h(cutomComponent, {obj: element})]
            // 渲染分栏组件
            if (element.type === 'el-row') {
                retData.push(renderLayout(element))
            }
            return retData
        }

        // 渲染Layout
        function renderLayout(element) {
            return h(
                <draggable
                    v-model={element.children}
                    animation={340}
                    tag="el-row"
                    component-data={{}}
                    group="people"
                    itemKey="field">
                    {{
                        item: (childProps) =>
                            <draggableItem element={childProps.element}
                                           form={element.children}
                                           activeId={activeId.value}
                                           copy={props.copy}
                                           delete={props.delete}
                                           choose={props.choose}
                                           onClick={event => {
                                               props.choose(childProps.element);
                                               event.stopPropagation()
                                               event.preventDefault()
                                           }}>
                            </draggableItem>,
                        header: () => <el-col span={24} v-show={!element.children.length}>
                            👈 请在左侧选择控件并拖至此处
                        </el-col>
                    }}
                </draggable>
            )
        }

        // 渲染工具
        function renderTools(item) {
            return h(
                <div className={'form-header'}>
                    <p>
                        {item.valid ? <span>*</span> : ''}
                        {item.title}
                    </p>
                    <div className="option">
                        <el-icon onClick={event => {
                            componentOperate(item, 'copy')
                            event.stopPropagation()
                            event.preventDefault()
                        }}>
                            {h(resolveComponent('el-icon-copy-document'))}
                        </el-icon>
                        <el-icon onClick={event => {
                            componentOperate(item, 'delete')
                            event.stopPropagation()
                            event.preventDefault()
                        }
                        }>
                            {h(resolveComponent('el-icon-delete'))}
                        </el-icon>
                    </div>
                </div>
            )
        }

        return () => h(resolveComponent('el-col'),{
            span: element.value.props.span
        },() => h(
            resolveComponent('el-card'),
            {
                style: {
                    'margin': '10px',
                    'border-radius': '16px',
                    'border-left': activeId.value === element.value.field ? `5px solid ${store.state.buttonColor}` : ''
                },
                class: 'dra-card'
            },() => renderItem(element.value)
        ))
    }
})

export default draggableItem;
